<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ladd Zhao | 高级科技感个人主页</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
    <style>
        :root {
            --primary: #00f5ff;
            --secondary: #9d4edd;
            --accent: #ff006e;
            --dark: #0a0a1f;
            --darker: #050510;
            --light: #e2f1f8;
            --glass: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, var(--darker), var(--dark));
            color: var(--light);
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* 自定义光标 */
        .cursor {
            width: 20px;
            height: 20px;
            border: 2px solid var(--primary);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: difference;
            transition: transform 0.2s ease;
        }

        .cursor-follower {
            width: 8px;
            height: 8px;
            background: var(--accent);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 9998;
            transition: transform 0.4s ease;
        }

        /* 3D背景容器 */
        #three-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        /* 导航栏 */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 1.5rem 3rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            background: var(--glass);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--glass-border);
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
        }

        .nav-link {
            color: var(--light);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            padding: 0.5rem 0;
            transition: color 0.3s ease;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: width 0.3s ease;
        }

        .nav-link:hover {
            color: var(--primary);
        }

        .nav-link:hover::after {
            width: 100%;
        }

        /* 主内容区 */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        section {
            min-height: 100vh;
            padding: 8rem 0;
            display: flex;
            align-items: center;
            position: relative;
        }

        /* 英雄区域 */
        .hero {
            flex-direction: column;
            text-align: center;
            justify-content: center;
            position: relative;
        }

        .hero h1 {
            font-size: 4.5rem;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            opacity: 0;
            transform: translateY(30px);
        }

        .hero h1 span {
            background: linear-gradient(90deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero p {
            font-size: 1.5rem;
            max-width: 700px;
            margin: 0 auto 2.5rem;
            opacity: 0;
            transform: translateY(30px);
        }

        .cta-button {
            display: inline-block;
            padding: 1rem 2.5rem;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            color: var(--dark);
            text-decoration: none;
            font-weight: 600;
            border-radius: 50px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 245, 255, 0.3);
            opacity: 0;
            transform: translateY(30px);
        }

        .cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 245, 255, 0.5);
        }

        /* 关于区域 */
        .about {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
        }

        .about-content h2 {
            font-size: 3rem;
            margin-bottom: 2rem;
            position: relative;
        }

        .about-content h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 80px;
            height: 4px;
            background: var(--primary);
        }

        .about-content p {
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }

        .skills-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .skill-card {
            background: var(--glass);
            border: 1px solid var(--glass-border);
            border-radius: 10px;
            padding: 1.5rem;
            text-align: center;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }

        .skill-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 25px rgba(0, 245, 255, 0.2);
            border-color: var(--primary);
        }

        .skill-card i {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--primary);
        }

        /* 技能柱状图可视化区域 */
        .skills-visualization {
            width: 100%;
            height: 400px;
            background: var(--glass);
            border-radius: 15px;
            border: 1px solid var(--glass-border);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(5px);
            padding: 2rem;
        }

        .chart-container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .chart-title {
            text-align: center;
            margin-bottom: 1.5rem;
            color: var(--primary);
            font-size: 1.5rem;
        }

        .bars-container {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            height: 250px;
            position: relative;
        }

        .bar-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 14%;
            height: 100%;
        }

        .bar-label {
            margin-top: 0.8rem;
            font-size: 0.9rem;
            text-align: center;
            color: var(--light);
            opacity: 0.8;
        }

        .bar-wrapper {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: flex-end;
            position: relative;
        }

        .bar {
            width: 100%;
            background: linear-gradient(to top, var(--primary), var(--secondary));
            border-radius: 5px 5px 0 0;
            position: relative;
            transition: all 0.5s ease;
            box-shadow: 0 0 10px rgba(0, 245, 255, 0.3);
        }

        .bar:hover {
            transform: scale(1.05);
            box-shadow: 0 0 15px rgba(0, 245, 255, 0.6);
        }

        .bar-value {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.9rem;
            font-weight: bold;
            color: var(--primary);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .bar:hover .bar-value {
            opacity: 1;
        }

        .bar-glow {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 10px;
            background: var(--primary);
            filter: blur(8px);
            opacity: 0.7;
            border-radius: 50%;
        }

        .y-axis {
            position: absolute;
            left: -40px;
            top: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 10px 0;
        }

        .y-tick {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.8rem;
        }

        /* 项目区域 */
        .projects {
            flex-direction: column;
        }

        .section-title {
            font-size: 3rem;
            text-align: center;
            margin-bottom: 4rem;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: var(--primary);
        }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2.5rem;
            width: 100%;
        }

        .project-card {
            background: var(--glass);
            border: 1px solid var(--glass-border);
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.4s ease;
            backdrop-filter: blur(5px);
        }

        .project-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 15px 30px rgba(0, 245, 255, 0.2);
            border-color: var(--primary);
        }

        .project-image {
            height: 200px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: var(--dark);
        }

        .project-content {
            padding: 1.5rem;
        }

        .project-content h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .project-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin: 1rem 0;
        }

        .project-tag {
            background: rgba(0, 245, 255, 0.1);
            color: var(--primary);
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.8rem;
        }

        /* 联系区域 */
        .contact {
            flex-direction: column;
            text-align: center;
        }

        .contact-form {
            max-width: 700px;
            width: 100%;
            margin: 0 auto;
        }

        .form-group {
            margin-bottom: 1.5rem;
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        .form-control {
            width: 100%;
            padding: 1rem;
            background: var(--glass);
            border: 1px solid var(--glass-border);
            border-radius: 8px;
            color: var(--light);
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(0, 245, 255, 0.2);
        }

        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-top: 3rem;
        }

        .social-link {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--glass);
            border: 1px solid var(--glass-border);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--light);
            font-size: 1.5rem;
            transition: all 0.3s ease;
        }

        .social-link:hover {
            transform: translateY(-5px);
            background: var(--primary);
            color: var(--dark);
            border-color: var(--primary);
        }

        /* 页脚 */
        footer {
            background: var(--darker);
            padding: 3rem 0;
            text-align: center;
            border-top: 1px solid var(--glass-border);
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .about {
                grid-template-columns: 1fr;
                gap: 3rem;
            }
            
            .hero h1 {
                font-size: 3.5rem;
            }
            
            .skills-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .skills-visualization {
                height: 350px;
            }
            
            .bars-container {
                height: 200px;
            }
        }

        @media (max-width: 768px) {
            .navbar {
                padding: 1rem 1.5rem;
            }
            
            .nav-links {
                display: none;
            }
            
            .hero h1 {
                font-size: 2.8rem;
            }
            
            .hero p {
                font-size: 1.2rem;
            }
            
            .skills-grid {
                grid-template-columns: 1fr;
            }
            
            .projects-grid {
                grid-template-columns: 1fr;
            }
            
            .bar-item {
                width: 12%;
            }
            
            .bar-label {
                font-size: 0.7rem;
            }
        }

        /* 动画类 */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <!-- 自定义光标 -->
    <div class="cursor"></div>
    <div class="cursor-follower"></div>

    <!-- Three.js 3D背景 -->
    <div id="three-bg"></div>

    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo">LADD ZHAO</div>
        <div class="nav-links">
            <a href="#home" class="nav-link">首页</a>
            <a href="#about" class="nav-link">关于</a>
            <a href="#projects" class="nav-link">项目</a>
            <a href="#contact" class="nav-link">联系</a>
        </div>
    </nav>

    <!-- 主内容 -->
    <div class="container">
        <!-- 英雄区域 -->
        <section id="home" class="hero">
            <h1>创造<span>数字未来</span>的代码艺术家</h1>
            <p>高级全栈开发者 | AI工程师 | 技术创新者</p>
            <a href="#projects" class="cta-button">探索我的作品</a>
        </section>

        <!-- 关于区域 -->
        <section id="about" class="about">
            <div class="about-content">
                <h2>关于我</h2>
                <p>我是一名充满激情的全栈开发者和AI工程师，专注于创造前沿的数字体验。拥有5年以上开发经验，我致力于将复杂的技术转化为直观、美观的用户界面。</p>
                <p>我的专长包括React、Vue、Node.js、Python、TensorFlow以及Three.js等前沿技术。我相信代码不仅是功能实现，更是艺术表达。</p>
                
                <div class="skills-grid">
                    <div class="skill-card fade-in">
                        <i class="fas fa-code"></i>
                        <h3>前端开发</h3>
                        <p>React, Vue, Three.js, GSAP</p>
                    </div>
                    <div class="skill-card fade-in">
                        <i class="fas fa-server"></i>
                        <h3>后端开发</h3>
                        <p>Node.js, Python, MongoDB, AWS</p>
                    </div>
                    <div class="skill-card fade-in">
                        <i class="fas fa-robot"></i>
                        <h3>AI/ML</h3>
                        <p>TensorFlow, PyTorch, NLP, CV</p>
                    </div>
                </div>
            </div>
            <div class="about-visual">
                <!-- 技能数据可视化区域 - 柱状图 -->
                <div class="skills-visualization">
                    <div class="chart-container">
                        <h3 class="chart-title">技能水平分析</h3>
                        <div class="bars-container">
                            
                            <div class="bar-item">
                                <div class="bar-wrapper">
                                    <div class="bar" data-value="90" style="height: 0%;">
                                        <div class="bar-value">90%</div>
                                        <div class="bar-glow"></div>
                                    </div>
                                </div>
                                <div class="bar-label">前端开发</div>
                            </div>
                            
                            <div class="bar-item">
                                <div class="bar-wrapper">
                                    <div class="bar" data-value="85" style="height: 0%;">
                                        <div class="bar-value">85%</div>
                                        <div class="bar-glow"></div>
                                    </div>
                                </div>
                                <div class="bar-label">后端开发</div>
                            </div>
                            
                            <div class="bar-item">
                                <div class="bar-wrapper">
                                    <div class="bar" data-value="80" style="height: 0%;">
                                        <div class="bar-value">80%</div>
                                        <div class="bar-glow"></div>
                                    </div>
                                </div>
                                <div class="bar-label">AI/ML</div>
                            </div>
                            
                            <div class="bar-item">
                                <div class="bar-wrapper">
                                    <div class="bar" data-value="75" style="height: 0%;">
                                        <div class="bar-value">75%</div>
                                        <div class="bar-glow"></div>
                                    </div>
                                </div>
                                <div class="bar-label">UI/UX设计</div>
                            </div>
                            
                            <div class="bar-item">
                                <div class="bar-wrapper">
                                    <div class="bar" data-value="70" style="height: 0%;">
                                        <div class="bar-value">70%</div>
                                        <div class="bar-glow"></div>
                                    </div>
                                </div>
                                <div class="bar-label">DevOps</div>
                            </div>
                            
                            <div class="bar-item">
                                <div class="bar-wrapper">
                                    <div class="bar" data-value="85" style="height: 0%;">
                                        <div class="bar-value">85%</div>
                                        <div class="bar-glow"></div>
                                    </div>
                                </div>
                                <div class="bar-label">项目管理</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 项目区域 -->
        <section id="projects" class="projects">
            <h2 class="section-title">精选项目</h2>
            <div class="projects-grid">
                <div class="project-card fade-in">
                    <div class="project-image">
                        <i class="fas fa-brain"></i>
                    </div>
                    <div class="project-content">
                        <h3>AI驱动的预测分析平台</h3>
                        <p>使用深度学习算法构建的预测分析系统，能够处理海量数据并提供准确的业务洞察。</p>
                        <div class="project-tags">
                            <span class="project-tag">Python</span>
                            <span class="project-tag">TensorFlow</span>
                            <span class="project-tag">React</span>
                            <span class="project-tag">D3.js</span>
                        </div>
                    </div>
                </div>
                <div class="project-card fade-in">
                    <div class="project-image">
                        <i class="fas fa-vr-cardboard"></i>
                    </div>
                    <div class="project-content">
                        <h3>沉浸式VR数据可视化</h3>
                        <p>利用WebGL和Three.js创建的数据可视化平台，让用户在虚拟现实中探索复杂数据集。</p>
                        <div class="project-tags">
                            <span class="project-tag">Three.js</span>
                            <span class="project-tag">WebGL</span>
                            <span class="project-tag">WebXR</span>
                            <span class="project-tag">Node.js</span>
                        </div>
                    </div>
                </div>
                <div class="project-card fade-in">
                    <div class="project-image">
                        <i class="fas fa-chart-network"></i>
                    </div>
                    <div class="project-content">
                        <h3>区块链供应链解决方案</h3>
                        <p>基于以太坊的供应链管理系统，提供完全透明和可追溯的产品生命周期记录。</p>
                        <div class="project-tags">
                            <span class="project-tag">Solidity</span>
                            <span class="project-tag">Ethereum</span>
                            <span class="project-tag">Web3.js</span>
                            <span class="project-tag">React</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 联系区域 -->
        <section id="contact" class="contact">
            <h2 class="section-title">与我联系</h2>
            <form class="contact-form">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="message">消息</label>
                    <textarea id="message" class="form-control" required></textarea>
                </div>
                <button type="submit" class="cta-button" style="width: 100%;">发送消息</button>
            </form>
            
            <div class="social-links">
                <a href="#" class="social-link"><i class="fab fa-github"></i></a>
                <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
                <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                <a href="#" class="social-link"><i class="fab fa-medium"></i></a>
            </div>
        </section>
    </div>

    <!-- 页脚 -->
    <footer>
        <p>&copy; 2023 Ladd Zhao. 保留所有权利。</p>
    </footer>

    <script>
        // 初始化GSAP ScrollTrigger
        gsap.registerPlugin(ScrollTrigger);

        // 自定义光标
        const cursor = document.querySelector('.cursor');
        const cursorFollower = document.querySelector('.cursor-follower');

        document.addEventListener('mousemove', (e) => {
            cursor.style.left = e.clientX + 'px';
            cursor.style.top = e.clientY + 'px';
            
            gsap.to(cursorFollower, {
                x: e.clientX,
                y: e.clientY,
                duration: 0.5,
                ease: "power2.out"
            });
        });

        document.addEventListener('mousedown', () => {
            cursor.style.transform = 'scale(0.8)';
            cursorFollower.style.transform = 'scale(1.5)';
        });

        document.addEventListener('mouseup', () => {
            cursor.style.transform = 'scale(1)';
            cursorFollower.style.transform = 'scale(1)';
        });

        // Three.js 3D背景
        let scene, camera, renderer, particles;
        
        function initThree() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            renderer = new THREE.WebGLRenderer({ alpha: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.getElementById('three-bg').appendChild(renderer.domElement);
            
            // 创建粒子系统
            const particleGeometry = new THREE.BufferGeometry();
            const particleCount = 5000;
            
            const posArray = new Float32Array(particleCount * 3);
            
            for(let i = 0; i < particleCount * 3; i++) {
                posArray[i] = (Math.random() - 0.5) * 10;
            }
            
            particleGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
            
            const particleMaterial = new THREE.PointsMaterial({
                size: 0.005,
                color: new THREE.Color(0x00f5ff),
                transparent: true,
                opacity: 0.8
            });
            
            particles = new THREE.Points(particleGeometry, particleMaterial);
            scene.add(particles);
            
            camera.position.z = 2;
            
            // 动画循环
            function animate() {
                requestAnimationFrame(animate);
                
                particles.rotation.x += 0.0005;
                particles.rotation.y += 0.001;
                
                renderer.render(scene, camera);
            }
            
            animate();
            
            // 响应窗口大小变化
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });
        }

        // 初始化技能柱状图
        function initSkillsChart() {
            const bars = document.querySelectorAll('.bar');
            
            // 使用GSAP为每个柱状条设置动画
            bars.forEach(bar => {
                const value = bar.getAttribute('data-value');
                
                // 创建滚动触发器
                gsap.to(bar, {
                    height: `${value}%`,
                    duration: 1.5,
                    ease: "power2.out",
                    scrollTrigger: {
                        trigger: bar,
                        start: "top 80%",
                        end: "bottom 20%",
                        toggleActions: "play none none reverse"
                    }
                });
            });
        }

        // 滚动动画
        function initScrollAnimations() {
            // 英雄区域文字动画
            gsap.to('.hero h1', {
                opacity: 1,
                y: 0,
                duration: 1,
                delay: 0.5
            });
            
            gsap.to('.hero p', {
                opacity: 1,
                y: 0,
                duration: 1,
                delay: 0.8
            });
            
            gsap.to('.cta-button', {
                opacity: 1,
                y: 0,
                duration: 1,
                delay: 1.1
            });
            
            // 滚动触发动画
            gsap.utils.toArray('.fade-in').forEach(element => {
                gsap.fromTo(element, {
                    opacity: 0,
                    y: 50
                }, {
                    opacity: 1,
                    y: 0,
                    duration: 1,
                    scrollTrigger: {
                        trigger: element,
                        start: "top 80%",
                        end: "bottom 20%",
                        toggleActions: "play none none reverse"
                    }
                });
            });
            
            // 视差效果
            gsap.to(particles.rotation, {
                x: "+=1",
                y: "+=2",
                scrollTrigger: {
                    scrub: 1
                }
            });
        }

        // 页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', () => {
            initThree();
            initSkillsChart();
            initScrollAnimations();
        });
    </script>
</body>
</html>
